<script setup lang="ts">
import type { ArticleContent } from '@/hooks/bank/useQuestionGroup'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import CreateQuestionPanel from '@/components/bank/create/CreateQuestionPanel.vue'
import QuestionGroupSettings from '@/components/bank/shared/QuestionGroupSettings.vue'
import QuestionList from '@/components/bank/shared/QuestionList.vue'
import BigButton from '@/components/common/BigButton.vue'
import message from '@/components/common/message'
import ScrollContainer from '@/components/common/ScrollContainer.vue'
import Select from '@/components/common/Select.vue'
import TextInput from '@/components/common/TextInput.vue'
import { Search } from '@/components/icons'
import { useQuestionGroup } from '@/hooks/bank/useQuestionGroup'

interface ReadingMaterial {
  textbookType: string
  passage: string
  author: string
  gradeType: string
  unit: string
  id: string
}

interface ReadingText extends ReadingMaterial {
  content: string
}

defineOptions({
  name: 'PreviewPage',
})

const router = useRouter()

// 使用共享的题目管理逻辑
const {
  questionList,
  editingQuestion,
  isCreateQuestionPopupVisible,
  questionGroupSettings,
  canSave,
  handleOpenCreateQuestion,
  handleOpenEditQuestion,
  handleCreateQuestion,
  handleCloseCreateQuestionPopup,
  removeQuestion,
  moveQuestionUp,
  moveQuestionDown,
  getEditingIndex,
  saveQuestionGroup,
} = useQuestionGroup()

// 材料选择相关状态
const readingMaterials = ref<ReadingMaterial[]>()
const contentViewing = ref<ReadingText>()
const showDetail = ref(false)
const selectedMaterialId = ref<string>('')

// 获取阅读材料列表
async function getReadingMaterialList() {
  return [
    {
      textbookType: '部编版',
      passage: '《红楼梦》(节选)',
      author: '曹雪芹',
      gradeType: '七年级上',
      unit: '第一单元',
      id: '1',
    },
    {
      textbookType: '部编版',
      passage: '《春晓》',
      author: '孟浩然',
      gradeType: '七年级上',
      unit: '第一单元',
      id: '2',
    },
    {
      textbookType: '部编版',
      passage: '《水调歌头》',
      author: '苏轼',
      gradeType: '七年级上',
      unit: '第二单元',
      id: '3',
    },
    {
      textbookType: '人教版',
      passage: '《荷塘月色》',
      author: '朱自清',
      gradeType: '八年级上',
      unit: '第三单元',
      id: '4',
    },
    {
      textbookType: '人教版',
      passage: '《背影》',
      author: '朱自清',
      gradeType: '八年级上',
      unit: '第四单元',
      id: '5',
    },
  ]
}

// 获取阅读文本内容
async function getReadingText(id: string) {
  const contents: Record<string, string> = {
    1: `文章题目：《红楼梦》(节选)  (作者：曹雪芹)

且说贾宝玉自那日芳官去后，便有贾芸来打听下落，宝玉因说："不知何往，或系遭蹇，不然便是父母令其归矣。"贾芸道："闻得老太太与珍大爷不相同。他近日所见的这几个奶妈，已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。

且说贾宝玉自那日芳官去后，便有些纳闷，便有贾芸来与别人不同。他近日所见的这几个奶妈，已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。已是不及了；况且日所见的这几个丫头，也不及芳官之乖巧。`.repeat(3),
    2: `文章题目：《春晓》  (作者：孟浩然)

春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。`,
    3: `文章题目：《水调歌头》  (作者：苏轼)

明月几时有？把酒问青天。
不知天上宫阙，今夕是何年。
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间。

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。`,
    4: `文章题目：《荷塘月色》  (作者：朱自清)

曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。

月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。`,
    5: `文章题目：《背影》  (作者：朱自清)

我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，"事已如此，不必难过，好在天无绝人之路！"

回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。

到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，"不要紧，他们去不好！"`,
  }

  const materials = await getReadingMaterialList()
  const material = materials.find(m => m.id === id)

  if (!material) {
    return {
      textbookType: '',
      passage: '',
      author: '',
      gradeType: '',
      unit: '',
      id: '',
      content: '未找到内容',
    }
  }

  return {
    ...material,
    content: contents[id] || `${material.passage}的内容`,
  }
}

// 初始化加载阅读材料列表
async function loadReadingMaterials() {
  readingMaterials.value = await getReadingMaterialList()
}

// 查看详情
async function viewDetail(id: string) {
  contentViewing.value = await getReadingText(id)
  showDetail.value = true
}

// 返回列表
function backToList() {
  showDetail.value = false
}

// 选择文本
function selectText(id: string) {
  selectedMaterialId.value = id
  message.success('已选择文本')
}

// 保存题组
async function handleSaveQuestionGroup() {
  if (!selectedMaterialId.value) {
    message.error('请先选择一个文本材料')
    return
  }

  const selectedMaterial = readingMaterials.value?.find(m => m.id === selectedMaterialId.value)
  if (!selectedMaterial) {
    message.error('选择的文本材料无效')
    return
  }

  const selectedText = await getReadingText(selectedMaterialId.value)
  const articleInfo: ArticleContent = {
    title: selectedMaterial.passage,
    author: selectedMaterial.author,
    content: selectedText.content,
  }

  await saveQuestionGroup(articleInfo).then(() => {
    router.push('/bank')
  })
}

// AI生题功能（待实现）
function handleAIGenerate() {
  // TODO: 实现AI生题功能
  message.info('AI生题功能正在开发中')
}

// 页面加载时获取阅读材料列表
loadReadingMaterials()
</script>

<template>
  <div class="card-area">
    <div class="card-header">
      <div class="card-title">
        <span>阅读文本</span>
        <button v-show="showDetail" class="back-button" @click="backToList">
          返回文本列表 >
        </button>
      </div>

      <!-- 详情视图 -->
      <div v-show="showDetail" class="reading-detail">
        <div class="detail-header">
          <div class="detail-meta">
            <div class="detail-meta-title">
              <span>文章题目：{{ contentViewing?.passage }}</span>
              <span>（作者：{{ contentViewing?.author }}）</span>
            </div>
            <div class="detail-meta-info">
              <span>{{ contentViewing?.textbookType }}</span>
              <span>{{ contentViewing?.gradeType }}</span>
              <span>{{ contentViewing?.unit }}</span>
            </div>
          </div>
        </div>
        <div class="scroll-container">
          {{ contentViewing?.content }}
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-show="!showDetail">
        <div class="filter-options">
          <Select label="教材:" placeholder="全部教材" />
          <Select label="年级:" placeholder="全部年级" />
          <TextInput label="搜索:" placeholder="文章关键词">
            <template #suffix>
              <Search />
            </template>
          </TextInput>
        </div>
        <ScrollContainer>
          <div v-for="material in readingMaterials" :key="material.id" class="scroll-item">
            <div class="textbook-type">
              <div class="textbook-tag">
                {{ material.textbookType }}
              </div>
            </div>
            <div class="passage-name">
              {{ material.passage }}
            </div>
            <div class="author-name">
              {{ material.author }}
            </div>
            <div class="textbook-grade">
              {{ material.gradeType }}
            </div>
            <div class="textbook-unit">
              {{ material.unit }}
            </div>
            <div class="operations">
              <button class="query-detail" @click="viewDetail(material.id)">
                查看详情
              </button>
              <button v-if="selectedMaterialId === material.id" class="select-text selected">
                已选择
              </button>
              <button v-else class="select-text select" @click="selectText(material.id)">
                选择文本
              </button>
            </div>
          </div>
        </ScrollContainer>
      </div>
    </div>
  </div>

  <QuestionList
    :questions="questionList" @create-question="handleOpenCreateQuestion"
    @edit-question="handleOpenEditQuestion" @remove-question="removeQuestion" @move-question-up="moveQuestionUp"
    @move-question-down="moveQuestionDown" @ai-generate="handleAIGenerate"
  />

  <QuestionGroupSettings v-model="questionGroupSettings" />

  <BigButton
    class="save-btn" text="保存题组" :disabled="!canSave || !selectedMaterialId"
    @click="handleSaveQuestionGroup"
  />

  <CreateQuestionPanel
    v-if="isCreateQuestionPopupVisible" :init-question="editingQuestion"
    :visible="isCreateQuestionPopupVisible" :editing-index="getEditingIndex()" @close="handleCloseCreateQuestionPopup"
    @confirm="handleCreateQuestion"
  />
</template>

<style scoped>
.save-btn {
  margin-top: 2rem;
}

.card-area {
  padding: 12px 19px 20px 19px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.card-header {
  width: 100%;
  position: relative;
}

.card-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-self: flex-start;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  padding-bottom: 8px;
}

.filter-options {
  margin: 16px 0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.scroll-item {
  display: grid;
  grid-template-columns: 80px 120px 100px 100px 1fr 200px;
  padding: 12px 8px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  font-size: 14px;

  .textbook-tag {
    background: var(--primary-color);
    color: white;
    border-radius: 100px;
    width: 50px;
    padding: 2px 4px;
    text-align: center;
    font-size: 11px;
    display: inline-block;
  }

  .passage-name {
    font-weight: 500;
    color: #333333;
  }

  .author-name {
    color: #666666;
    font-size: 12px;
  }

  .operations {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;

    .query-detail {
      background: transparent;
      color: var(--primary-color);
      border: none;
      cursor: pointer;
      padding: 6px 12px;
      font-size: 13px;
    }

    .select {
      color: #696969;
      background: #ffffff;
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      border: none;
      padding: 6px 12px;
      cursor: pointer;
    }

    .selected {
      color: #ffffff;
      background: var(--primary-color);
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      border: none;
      padding: 6px 12px;
      cursor: pointer;
    }

    .select-text {
      font-size: 12px;
    }

    button {
      width: 83px;
      display: block;
      border-radius: 6px;
      text-align: center;
    }
  }
}

/* 详情页样式 */
.reading-detail {
  .detail-header {
    margin-bottom: 20px;

    h2 {
      font-size: 20px;
      margin: 12px 0;
      text-align: center;
    }

    .detail-meta {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: #666;
      font-size: 14px;

      .detail-meta-title {
        span:first-child {
          color: black;
        }
      }

      .detail-meta-info {
        span {
          margin-right: 10px;
          padding: 4px 8px;
          font: 12px bold;
          border-radius: 100px;
          background: #7a91fe;
          color: white;
        }
      }
    }
  }
}

.back-button {
  color: var(--primary-color);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
  display: inline;
  align-items: center;
}
</style>
